//本周流行的组件
<template>
  <div class="fashion">
    <div class="title">今日流行</div>
    <ul class="clear-fix">
      <li v-for="(item,index) in fashinonDatas" :key="index" class="left fashion-item">
        <img :src="item.img" alt />
        <div>{{item.name}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    fashinonDatas: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style lang="scss" scoped>
.fashion {
  border-top: solid 6px #F3EEEF;
  width: 100%;
  font-size: 12px;
  font-weight: bold;
  .title {
    text-align: center;
    font-size: 14px;
    height: 34px;
    line-height: 34px;
  }
  .fashion-item {
    //定义每个li的宽度为屏幕宽度的1/4
    width: 25%;
    text-align: center;
    margin: 10px 0 8px;
    img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
    }
  }
}
</style>
